<template>
  <div class="query-form">
    <!-- 运行页面请求输入框 -->
    <el-form :model="form" :inline="true">
      <el-row :gutter="10">
        <el-col :span="isShowSaveInterfaceBtn ? (data.tag == '用例' ? 19 : 20) : 22">
          <el-input disabled v-model="form.path" v-if="isEnv">
            <template #prepend
              ><span style="margin: 0 10px" :style="{ color: methodStyle[form.requestType] }">{{
                form.requestType
              }}</span>
              <span class="service">{{ envUrl }}</span></template
            >
          </el-input>
          <el-input disabled v-model="form.url" v-else @keyup.enter="onSubmit">
            <template #prepend
              ><span style="margin: 0 10px" :style="{ color: methodStyle[form.requestType] }">{{
                form.requestType
              }}</span></template
            >
          </el-input>
        </el-col>
        <el-col :span="isShowSaveInterfaceBtn ? (data.tag == '用例' ? 5 : 4) : 2">
          <el-button type="primary" :disabled="btnIsDisabled" @click="onSubmit">调试</el-button>
          <el-button
            @click="onSave"
            :disabled="btnIsDisabled"
            v-show="isShowSaveInterfaceBtn"
            type="primary"
            plain
            >{{ data.tag == '用例' ? '保存' : '保存用例' }}</el-button
          >
          <el-button type="danger" plain v-show="isShowSaveInterfaceBtn && data.tag == '用例'"
            >删除</el-button
          >
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { propTypes } from '@/utils/propTypes'
import { splitUrl } from '@/utils/url'
import { useDebugStore } from '@/store/modules/debug'
const debugStore = useDebugStore()
const emit = defineEmits(['save-case', 'debug', 'formValue', 'save', 'to-delete', 'open-env'])
const props = defineProps({
  data: propTypes.object.def({})
})
const btnIsDisabled = ref(false)
let form = ref({
  path: '',
  hostname: '',
  requestType: props.data.requestType,
  protocal: 'http',
  url: props.data.url
} as any)
const envUrl = ref('')
const isEnv = ref(false)
const environmentId = computed(() => debugStore.getEnvironmentId)
const methodStyle = ref({
  GET: '#17b26a',
  POST: '#ef6820',
  DELETE: '#f04438',
  PUT: '#2e90fa'
})
const isShowSaveInterfaceBtn = inject('isShowSaveInterfaceBtn')
const onSubmit = () => {
  emit('debug')
}
watch(
  () => props.data,
  () => {
    if (props.data.projectParamas) {
      envUrl.value = props.data.projectParamas.conditionUrl
      init()
    }
  },
  {
    deep: true
  }
)
const init = async () => {
  // url地址拆分
  let splitUrlList = {} as any,
    url = ''
  // 只有路径
  if (props.data.url?.indexOf('http') == -1) {
    // 没有环境服务，禁用功能，显示路径
    if (!envUrl.value) {
      btnIsDisabled.value = true
      form.value.path = props.data.url
      form.value.url = props.data.url
      form.value.requestType = props.data.requestType
    } else {
      // 有环境服务
      url = `${envUrl.value}${props.data.url}`
      splitUrlList = splitUrl(url.replace(/([^:]\/)\/+/g, '$1'))
    }
  } else {
    // 有完整地址，根据有无环境服务进行区别处理
    splitUrlList = splitUrl(props.data.url)
    if (envUrl.value) {
      url = envUrl.value + splitUrlList.path
    } else {
      url = props.data.url
    }
    splitUrlList = splitUrl(url)
  }
  if (splitUrlList?.path) {
    form.value = {
      url: props.data.url,
      requestType: props.data.requestType,
      path: splitUrlList?.path,
      hostname: splitUrlList?.hostname,
      protocal: splitUrlList?.protocol
    }
  }
  // 向上发送的form
  const formValue = {
    url: url.replace(/([^:]\/)\/+/g, '$1'),
    requestType: props.data.requestType,
    protocal: form.value.protocal
  }
  environmentId.value && envUrl.value && (isEnv.value = true)
  emit('formValue', { ...formValue, name: props.data.name })
}
onMounted(async () => {
  init()
})
</script>

<style scoped lang="scss">
:deep(.el-input-group__prepend) {
  padding: 0;

  .service {
    padding: 0 10px;
  }

  .el-select {
    width: 120px;
    margin: 0;
  }
}

:deep(.el-input.is-disabled) {
  .el-input-group__prepend,
  .el-input__wrapper,
  .el-input__inner {
    cursor: default;
  }
}
</style>
